<template>
	<view class="uni-pages">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="false" :loading-more-enabled="false">
			<template slot="top">
				<u-navbar :borderBottom="false" :height="50" :isFixed="true" :is-back="true" back-icon-color="#4f4f4f"
					title-color="#333">
					<view class="flex justify-between align-center text-333 font-18 width-100 padding-lr-sm text-4f">
						<!-- <view class="font-weight-blod">
							<text class="cuIcon-back"></text>
						</view> -->
						<view class="font-weight-blod flex-1 flex justify-center align-center height-100 text-333">
							客户需求明细</view>
						<view class="flex justify-between align-center">编辑</view>
					</view>
				</u-navbar>
				<view class="bg-white padding">
					<view class="flex align-center text-82 padding-bottom-xs">
						<view class="font-12 margin-right-sm duiqi">发货方</view>
						<view class="font-14">九州通|山西药九九</view>
					</view>
					<view class="flex align-center text-82 padding-bottom-xs">
						<view class="font-12 margin-right-sm duiqi">客户</view>
						<view class="font-14 text-333 font-weight-blod">太原市小店区梁栋诊所(X00001)</view>
					</view>

					<view class="flex align-center text-82 font-12 padding-bottom-xs">
						<view class=" margin-right-sm duiqi">用途</view>
						<view class=" ">购销/山西药九九</view>
					</view>

					<view class="flex align-center justify-between font-16">
						<view class="flex align-center">
							<image src="/static/icon/concat-me.png" style="width: 52rpx;height: 52rpx;"
								class="margin-right-sm"></image>
							<view>客户/开票员/负责业务员</view>
						</view>
						<view>
							<view class="  bg-main-yellow"
								style="padding: 3rpx; border-radius: 30rpx;width: 180rpx;height: 54rpx;">
								<view class="bg-white flex justify-center align-center"
									style=" border-radius: 30rpx;height: 100%;color: #F2994A;" @click="gotoSelectList()">
									继续添加
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="margin-tb-sm ">
				<template v-for="(item,index) in dataList">

					<view class="flex align-center bg-white padding">
						<view class="gouxuan">
							<!-- <view class="" style="border:1px solid #828282;width: 24px;height: 24px;border-radius: 50%;"></view> -->
							<view class="bg-main-yellow flex justify-center align-center"
								style="width: 24px;height: 24px;border-radius: 50%;">
								<text class="cuIcon-check"></text>
							</view>
						</view>
						<view class="flex-1">
							<view class=" margin-left-xs flex">
								<view class="margin-right-xs">
									<image src="/static/icon/yinpin.png"
										style="width: 160rpx;height:160rpx;border-radius: 28rpx;background-color: #f7f7f7;">
									</image>
								</view>
								<view class="flex-column justify-around text-333 font-16 flex-1 font-weight-blod">
									<view>安神糖浆</view>
									<view class="text-82 font-12 font-weight-normal"><text
											class="margin-right-sm">120ml</text> 贵州益佰制药股份有限公司</view>
									<view style="height: 10rpx;"></view>
									<view class="flex align-center justify-between">
										<view class="">
											¥10
										</view>
										<view><u-number-box v-model="value" @change="valChange"></u-number-box></view>
									</view>
								</view>
							</view>
							<view class="font-12" style="color: #BDBDBD;">山西药九九/山西药九九</view>
						</view>
					</view>
				</template>
			</view>
			<template slot="bottom">
				<view class="flex justify-between align-center bg-white padding" style="height: 100rpx;" v-if="false">
					<view class="gouxuan flex align-center">
						<view style="border:1px solid #828282;width: 18px;height: 18px;border-radius: 50%;"></view>
						<!-- <view class="bg-main-yellow flex justify-center align-center"
							style="width: 18px;height: 18px;border-radius: 50%;">
							<text class="cuIcon-check"></text>
						</view> -->
						<view class="margin-left-xs">全选</view>
					</view>
					<view class="flex align-center">
						<view class="flex align-center">
							<view class="cu-btn round text-333 line-black">删除</view>
						</view>
					</view>
				</view>
				
				<view class="flex justify-between align-center bg-white " style="height: 100rpx;">
					<view class="gouxuan flex align-center padding-left-sm">
						<!-- <view style="border:1px solid #828282;width: 18px;height: 18px;border-radius: 50%;"></view> -->
						<view class="bg-main-yellow flex justify-center align-center"
							style="width: 18px;height: 18px;border-radius: 50%;">
							<text class="cuIcon-check"></text>
						</view>
						<view class="margin-left-xs">已选(1)</view>
					</view>
					<view class="flex align-center height-100">
						<view class="flex align-center margin-right-sm">
							<text class="text-red font-18 font-weight-blod">￥14.72</text>
						</view>
						<view class="height-100 bg-main-yellow-2 flex justify-center align-center padding-lr-sm" >
							提交客户需求
						</view>
					</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				dataList: []
			}
		},
		methods: {
			valChange(e) {
				console.log(e)
			},
			gotoSelectList(){
				uni.navigateTo({
						url:'/pages/zyt/shopList',
							})
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize)
				if (pageNo == 1) {
					let res = [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}]
					this.$refs.paging.complete(res)

				} else {
					this.$refs.paging.complete([])
				}
				// if (!this.isLogin) {
				// 	this.$refs.paging.complete(false);
				// 	return;
				// }
				// try {
				// 	let data = await this.$http.post(this.$api.edu.getOnlineCourseSelectionList, {
				// 		key: this.dataForm.key,
				// 		studyId: this.dataForm.studyId ? this.dataForm.studyId : -1,
				// 	})
				// 	this.$refs.paging.complete(data.list)
				// } catch (e) {
				// 	this.$refs.paging.complete([]);
				// }

			},
		}
	}
</script>

<style scoped lang="scss">
	.uni-pages {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.duiqi {
		text-align: justify;
		text-align-last: justify;
		width: 74rpx;
	}
</style>